// 详情页的逻辑代码
// 0. 获取元素
const box = document.querySelector('.box')
const paramsBox = document.querySelector('.params')

// 1. 拿到商品 id
const goodsId = window.sessionStorage.getItem('goodsId')
!goodsId ? window.location.href = '../htmls/list.html' : getGoodsInfo()

// 2. 发送请求, 请求商品详细数据信息
async function getGoodsInfo() {
  // 2-1. 请求数据
  const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: { id: goodsId },
    dataType: 'json'
  })

  // 2-2. 判断查询的商品不存在
  // 跳转回到列表页面
  if (res.code === 2) {
    window.location.href = '../htmls/list.html'
    return
  }

  // console.log(res.info)



  // 2-3. 渲染页面——加上放大镜

  // box.innerHTML = `
  //   <div class="left">
  //     <img src="${ res.info.img_big_logo }" alt="">
  //   </div>
  // `



  // 放大镜部分渲染
  box.innerHTML = `


      <div class="box" id="box">

        <div class="show">
          <img src="${ res.info.img_big_logo }">
          <div class="mask"></div>
        </div>

        <div class="enlarge">
          <img src="${ res.info.img_big_logo }" alt="">
        </div>

      </div>


    `

  box.innerHTML += ` 
    <div class="right">
      <p class="title">
        ${ res.info.title }
      </p>
      <p class="price">
        <span class="current">￥${ res.info.current_price }</span>
        <span class="old">￥${ res.info.price }</span>
      </p>
      <p class="number">
        <button>-</button>
        <input type="text" value="1">
        <button>+</button>
      </p>
      <p class="btns">
        <button>加入购物车</button>
        <button>立即购买</button>
      </p>
    </div>
  `




  // 商品参数是直接给的
  // 注意: 必须在服务器上打开, 才能看到
  paramsBox.innerHTML = res.info.goods_introduce;


  // 创建实例对象，要在这里，在获取数据，渲染页面之后再进行
  const en = new EnlargeObj('#box')
  }